<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';


import reqApis from "../../../req/reqApis.js";
const router = useRouter();


const props = defineProps({
  typeNum: {
    type: Number,
    default: 0,
  },
  shopList: {
    type: Array
  }
});

const currentData = ref<any>({
  shopInfoList:  [{shopName: "美美",shopLogo: "https://i0.hdslb.com/bfs/archive/9ef9db7c3535394b379b10e631754910aaccddc0.jpg"}]
});

const getShopInfoListFn = () => {
  // reqApis.getShopInfoListFn().then(res => {
  //   this.shopInfoList = res.data;
  // })
};
const toShop = (shopId: any) =>  {
    router.push({path: "/shopDetail", query: {shopId: shopId}});
}

getShopInfoListFn();
</script>
<template>
  <section class="homeMeunUtil" :class="{'br0': typeNum}">
    <div class="meun-item" v-for="(item, index) in currentData.shopInfoList" :key="index" @click="toShop(item.shopId)">
      <div class="meun-icon" :style="{background: `url(${item.shopLogo}) center no-repeat`}"></div>
      <div class="meun-text">{{item.shopName}}</div>
    </div>
    <div class="meun-item">
      <div class="meun-icon"></div>
      <div class="meun-text">更多店铺</div>
    </div>
  </section>
</template>

<style lang="less" scoped>
.homeMeunUtil {
  width: 3.75rem;
  height: 1.62rem;
  border-radius: .15rem .15rem 0 0;
  background: white;
  margin-top: -.1rem;
  position: relative;
  z-index: 100;
  &.br0 {
     border-radius: 0;
  }
  .meun-item {
    width: .75rem;
    height: .75rem;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: .15rem;
    box-sizing: border-box;
    .meun-icon {
      width: .4rem;
      height: .4rem;
      background: url("../../../assets/images/meun-icon-1.png") no-repeat center;
      background-size: cover !important;
      margin-bottom: .1rem;
    }
    .meun-text {
      font-size: .12rem;
    }
  }
}
</style>


